<!-- D:/project/en2_haiou/haiou-en2-pc/static/images/finddrug -->
<template>
  <div class="pagebody">
    <Header />
    <div class="banner">
      <div class="container">
        <div class="bannerpad">
          <div class="bantitle">
            Seagull Medical is committed to solving the problem of finding medicine
          </div>
          <div class="bantxt">
            Targeted Therapies,Oncology Medications,Rare Disease Treatments,Orphan Drugs,Imported Pharmaceuticals and
            more
          </div>
        </div>
      </div>
    </div>

    <div class="thingbox">
      <div class="container">
        <div class="title">Seagull Medical，One-stop solution to the problem of finding medicine</div>
        <div class="introduce">
          Big data surveys show that there are two main reasons why drugs are difficult to find: first, they are
          restricted by multiple factors such as raw material supply and production process, resulting in limited drug
          production that is unable to meet the needs of patients; second, the asymmetry of drug circulation information
          increases the difficulty of finding drugs, and patients cannot track drug availability in time.
        </div>
        <div class="imgbox justify-between">
          <img src="@/static/images/finddrug/imgbox.png"
               alt="">
          <div class="imgtxt">
            In view of the problems of asymmetric drug information and difficulty in obtaining scarce drugs, Seagull
            Medical has established in-depth cooperation with hundreds of pharmaceutical companies around the world,
            built a professional drug database relying on big data technology, and provided global customers with
            professional services such as global drug search and drug consultation, and is committed to realizing the
            vision of “there is no hard-to-find drug in the world”.
          </div>
        </div>
      </div>
    </div>

    <div class="connection">
      <div class="container">
        <div class="title">Seagull Medical: Global Medication Sourcing with Instant Online Connection.
        </div>
        <div class="introduce">
          Seagull Medical has always adhered to the service concept of “providing customers with efficient and
          considerate services”, and its professional team is online 24 hours a day to provide customers with global
          medication sourcing services. You can contact us at any time to address your medication needs by scanning the
          WeChat QR Code, sending an email or leaving an online message.
        </div>
        <div class="option align-center justify-center">
          Option 1: Fast Track
        </div>
        <div class="optiontxt">
          Get fast, free one-on-one support directly from our customer service team - simple and
          convenient.
        </div>
        <div class="codebox justify-between">
          <div class="box pos-rel flex-row borderbox justify-center align-center">
            <div class="ltbox pos-abs">Method 1</div>
            <div class="code"></div>
            <div class="txt">Scan QR Code with WeChat
              Add Us for Free Consultations</div>
          </div>
          <div class="box pos-rel flex-row borderbox justify-center align-center">
            <div class="ltbox pos-abs">Method 2</div>
            <div @click="copytext"
                 class="copy borderbox csp align-center justify-center pos-rel">{{ copyemail }}
              <img class="pos-abs copyimg"
                   src="@/static/images/finddrug/copy.png"
                   alt="">
            </div>
            <div class="shorttxt">Contact Us</div>
          </div>
        </div>

        <div class="option align-center justify-center">
          Option 2: Message Board
        </div>
        <div class="optiontxt">
          Submit your information via our form and await medical consultant follow-up.
        </div>

        <div class="appform borderbox flex-row">
          <div class="form_left borderbox">
            <div class="formtitle">Message board</div>
            <div class=" flex-row justify-between mb16">
              <div class="label"
                   style="line-height: 42px;">Name</div>
              <input class="oneinput"
                     placeholder="Please enter your name."
                     v-model="form.name"
                     type="text">
              <div class="label ml16"
                   style="line-height: 42px;width: 108px;">Mobile Number</div>
              <input class="twoinput"
                     placeholder="Please enter your name."
                     v-model="form.remark"
                     type="text">
            </div>
            <div class=" flex-row align-center mb16">
              <div class="label">Contact<span>*</span>
                Information</div>
              <input placeholder="Please enter your additional contact details."
                     v-model="form.tel"
                     type="text">
            </div>
            <div class=" flex-row align-start mb16">
              <div class="label">Problem Description</div>
              <!-- <input placeholder="Please enter your additional contact details." type="text"> -->
              <textarea class="problem"
                        placeholder="Please describe your requirements."
                        name=""
                        v-model="form.content"
                        id=""></textarea>
            </div>
            <div class=" justify-end">
              <div class="submitbtn align-center justify-center csp"
                   @click="submit">Leave a comment</div>
            </div>
          </div>

          <div class="form_right">
            <div class="form_title">
              Seagull Medical Reminder:
            </div>
            <div class="form_txt mt30">
              1.Please ensure accurate contact details and keep your phone/communication channels accessible for
              timely follow-up.
            </div>
            <div class="form_txt mt15">
              2.We appreciate your patience as response times may vary during peak inquiry periods.
            </div>
            <div class="form_txt mt15">
              3.Your personal information is strictly safeguarded under our privacy commitment.
            </div>
          </div>
        </div>

      </div>
    </div>

    <div class="fourimg">
      <div class="container">
        <div class="title">Find Medicines Worldwide - Choose Seagull Medical
        </div>
        <div class="introduce">
          Four Core Benefits for Hassle-Free Medicine Purchasing
        </div>
        <div class="fourbox justify-start flex-wrap">
          <div class="fouritem">
            <img src="@/static/images/finddrug/one.png"
                 alt="">
          </div>
          <div class="fouritem align-center justify-center flex-col">
            <div class="four_title">
              Reliable Supply Sources
            </div>
            <div class="four_txt">
              Our global partners provide targeted therapies, oncology medications, rare disease treatments, orphan
              drugs, and imported pharmaceuticals to meet diverse treatment needs.
            </div>
          </div>
          <div class="fouritem">
            <img src="@/static/images/finddrug/two.png"
                 alt="">
          </div>
          <div class="fouritem align-center justify-center flex-col">
            <div class="four_title">
              Affordable pricing options
            </div>
            <div class="four_txt">
              Professional team monitors market trends in real-time to swiftly respond to price fluctuations, with a
              direct supply model that eliminates intermediaries, ensuring peace of mind for patients.
            </div>
          </div>
          <div class="fouritem align-center justify-center flex-col">
            <div class="four_title">
              Guaranteed by Contract
            </div>
            <div class="four_txt">
              Compliant and reliable, with clear responsibilities and obligations for both parties, ensuring peace of
              mind for medication purchases and comprehensive protection of legal rights and interests.
            </div>
          </div>
          <div class="fouritem">
            <img src="@/static/images/finddrug/three.png"
                 alt="">
          </div>
          <div class="fouritem align-center justify-center flex-col">
            <div class="four_title">
              Ethical Integrity at the Core
            </div>
            <div class="four_txt">
              Committed to integrity and quality assurance for your peace of mind in pharmaceutical purchases.
            </div>
          </div>
          <div class="fouritem">
            <img src="@/static/images/finddrug/four.png"
                 alt="">
          </div>
        </div>
      </div>
    </div>

    <Footer />

  </div>
</template>

<script>
import { addLeaveWord } from '@/api/api'

export default {
  name: 'finddrug',
  components: {
  },

  head () {
    return {
      // tdk设置
      title: "",
    };
  },
  async asyncData ({ app, isDev, route, store, env, params, query, req, res, redirect, error }) {
    return {
    }
  },
  data () {
    return {
      copyemail: 'developer@techcommunity.com',
      form: {
        type: '02',
        lyType: "05",
        name: "",
        tel: "",
        content: "",
        remark: ""
      }
    }
  },
  methods: {
    copytext () {
      const textarea = document.createElement('textarea');
      textarea.value = this.copyemail;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand('copy');
      document.body.removeChild(textarea);
      this.$message({
        message: 'Replicating Success',
        type: 'success'
      });
    },
    submit () {
      if (this.form.name == "" || this.form.tel == "") {
        this.$message({
          showClose: true,
          message: 'Please fill in your name and email',
          type: 'warning'
        });
        return
      } else {
        this.$axios.post(addLeaveWord, this.form).then(res => {
          this.$notify({
            title: 'tip',
            message: res.msg,
          });
        })

      }
    }
  }

}
</script>

<style lang="scss" scoped>
.title {
  font-family: Arial, Arial;
  font-weight: 900;
  font-size: 32px;
  color: #2e343e;
  text-align: left;
}

//使用伪类添加title边框
.title::after {
  content: "";
  width: 140px;
  height: 23px;
  display: block;
  border-bottom: 6px solid #0041a3;
}

.introduce {
  margin-top: 24px;
  font-family: Arial, Arial;
  font-weight: 400;
  font-size: 18px;
  color: #616469;
  line-height: 32px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.pagebody {
  .banner {
    height: 480px;
    background: url(@/static/images/finddrug/banner.png) no-repeat;
    background-size: cover;

    .bannerpad {
      padding: 100px 89px;

      .bantitle {
        width: 553px;
        font-family: Arial, Arial;
        font-weight: 900;
        font-size: 32px;
        color: #2e343e;
        text-align: left;
        margin-bottom: 24px;
      }

      .bantxt {
        width: 553px;
        font-family: Arial, Arial;
        font-weight: 400;
        font-size: 18px;
        color: #616469;
        line-height: 32px;
        text-align: left;
      }
    }
  }

  .thingbox {
    background: #fff;
    padding: 68px 0 109px;

    .imgbox {
      margin-top: 32px;
      height: 333px;
      background: #f5f8fd;

      img {
        width: 500px;
      }

      .imgtxt {
        padding: 41px 54px 40px 40px;
        font-family: Arial, Arial;
        font-weight: 400;
        font-size: 18px;
        color: #2e343e;
        line-height: 36px;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
    }
  }

  .connection {
    padding: 80px 0;
    background: #f5f8fd;

    .option {
      margin-top: 48px;
      width: max-content;
      padding: 24px;
      background: linear-gradient(
        180deg,
        #e8efff 0%,
        rgba(232, 239, 255, 0.5) 100%
      );
      border-radius: 24px 24px 24px 0px;
      font-family: Arial, Arial;
      font-weight: bold;
      font-size: 24px;
      color: #0041a3;
      line-height: 24px;
    }

    .optiontxt {
      margin-top: 24px;
      font-family: Arial, Arial;
      font-weight: bold;
      font-size: 24px;
      color: #2e343e;
      line-height: 24px;
      text-align: left;
    }

    .codebox {
      margin-top: 88px;

      .box {
        width: 580px;
        height: 308px;
        background: linear-gradient(
          180deg,
          #e8efff 0%,
          rgba(232, 239, 255, 0.5) 100%
        );
        border-radius: 24px 24px 24px 24px;

        .ltbox {
          top: -21px;
          left: 0;
          width: 121px;
          height: 42px;
          background: linear-gradient(
            135deg,
            #dddafd 0%,
            #5f6bf6 51%,
            #0041a3 95%
          );
          border-radius: 100px 84px 84px 0px;
          font-family: Arial, Arial;
          font-weight: 900;
          font-size: 14px;
          color: #ffffff;
          line-height: 42px;
          text-align: center;
        }

        .code {
          width: 165px;
          height: 165px;
          background: #fff;
        }

        .txt {
          margin-left: 16px;
          width: 261px;
          font-family: Arial, Arial;
          font-weight: bold;
          font-size: 18px;
          color: #2e343e;
          line-height: 36px;
          text-align: left;
        }

        .shorttxt {
          margin-left: 16px;
          font-family: Arial, Arial;
          font-weight: bold;
          font-size: 18px;
          color: #2e343e;
          line-height: 36px;
          text-align: left;
        }

        .copy {
          width: 283px;
          height: 164px;
          padding: 0 16px;
          background: #ffffff;
          border-radius: 16px 16px 16px 16px;
          font-family: Arial, Arial;
          font-weight: bold;
          font-size: 24px;
          color: #2e343e;
          line-height: 24px;
          text-align: left;
          word-wrap: break-word;
          word-break: break-all;

          .copyimg {
            width: 22px;
            right: 12px;
            bottom: 50px;
          }
        }
      }
    }

    .appform {
      margin-top: 48px;
      padding-bottom: 33px;
      height: 445px;
      background: linear-gradient(
        180deg,
        #d9e5ff 0%,
        rgba(232, 239, 255, 0.5) 100%
      );
      border-radius: 32px 32px 32px 32px;

      .form_left {
        padding: 48px 32px 32px;
        width: 816px;
        border-right: 1px dashed #c9d7fb;

        .formtitle {
          font-family: Arial, Arial;
          font-weight: bold;
          font-size: 24px;
          color: #2e343e;
          line-height: 24px;
          text-align: left;
          margin-bottom: 24px;
        }

        .label {
          width: 77px;
          text-align: right;
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          font-size: 14px;
          color: #2e343e;
          margin-right: 8px;
          max-height: 42px;

          span {
            color: #f97a3f;
          }
        }

        .oneinput {
          width: 296px !important;
        }

        .twoinput {
          width: 244px !important;
        }

        input {
          box-sizing: border-box;
          padding: 0 16px;
          width: 667px;
          height: 40px;
          border: 1px solid #e4e9f3;
        }

        .problem {
          outline-color: transparent;
          font-family: Arial, Arial;
          font-size: 14px;
          width: 667px;
          height: 126px;
          border: none;
          padding: 8px 16px;
        }

        .submitbtn {
          width: 184px;
          height: 42px;
          background: #0078ff;
          border-radius: 8px 8px 8px 8px;
          font-family: Arial, Arial;
          font-weight: bold;
          font-size: 18px;
          color: #ffffff;
          line-height: 18px;
        }
      }

      .form_right {
        padding: 48px 40px 0;

        .form_title {
          font-weight: bold;
          font-size: 24px;
          color: #2e343e;
        }

        .form_txt {
          font-size: 16px;
          color: #2e343e;
        }
      }
    }
  }

  .fourimg {
    background: #fff;
    padding: 162px 0 102px;

    .fourbox {
      margin-top: 24px;
      height: 600px;
      background: #f5f8fd;

      .fouritem {
        width: 300px;
        height: 300px;

        img {
          width: 300px;
        }

        .four_title {
          padding: 0 24px;
          font-weight: bold;
          font-size: 18px;
          color: #2e343e;
          line-height: 32px;
        }

        .four_txt {
          padding: 0 24px;
          font-size: 16px;
          color: #2e343e;
          line-height: 32px;
        }
      }
    }
  }
}
</style>